<template>
	<view class="wrapper">
		<!-- <Head :border="false" title="简历置顶" backgroundColor="transparent" leftIcon="left" color="#fff"></Head> -->
		<img class="banner_img" src="@/service/static/img/resumeTopBg.png" alt="">
		<view class="info">
			<view class="serviceBox">
				<view class="resumeServiceTitle">选择服务</view>
				<view class="serviceList clearfix">
					<view :class="activeIndex == index ? 'serviceItem ac' : 'serviceItem'"
						v-for="(item,index) in stickList" :key="index" @click="handleServiceItemClick(item,index)">
						<view v-if="item.recommend == 1" class="recomIcon"></view>
						<view class="t1">{{item.name}}</view>
						<view class="t2"><text>￥</text>{{item.expense1}}.{{item.expense2}}</view>
						<view class="t3">{{item.expense_avg}}</view>
						<view class="icon"></view>
					</view>
				</view>
			</view>

			<view class="payBox">
				<checkbox-group @change="handleIsIntegralChange" v-if="enable_points_deduct == 1">
					<label>
						<view class="payLine border">
							<view class="label">{{ points_byname }}抵扣</view>
							<view class="text">
								可使用{{enable_points_deduct_points}}{{ points_byname }}抵扣{{enable_points_deduct_expense}}元
								<checkbox color="#09bb07" style="transform:scale(0.8)" :checked="is_deduct" />
							</view>
						</view>
					</label>
				</checkbox-group>

				<radio-group @change="handleChangePaymentType" v-if="amount>0">
					<!-- #ifdef MP-TOUTIAO || MP-WEIXIN -->
					<label>
						<view class="payLine">
							<view class="label wxIcon">微信支付</view>
							<view class="text">
								<radio value="wxpay" :checked="paymentType == 'wxpay'" />
							</view>
						</view>
					</label>
					<!-- #endif -->
					<!-- <label>
						<view class="payLine">
							<view class="label aliIcon">支付宝支付</view>
							<view class="text">
								<radio value="alipay" :checked="paymentType == 'alipay'" />
							</view>
						</view>
					</label> -->
				</radio-group>
			</view>
			<view class="btns">
				<view class="price">
					应付金额： <text class="color">￥{{amount}}</text>
				</view>
				<view class="btn">
					<Pay :paymentType="paymentType" :orderParams="orderParams" @handlePaySuccess="handlePaySuccess"
						@handlePayFail="handlePayFail">立即支付</Pay>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import handlerHttpError from '@/utils/error'
	import http from '@/utils/http'
	import api from '@/api'
	import Pay from '@/components/Pay.vue'
	export default {
		components:{
			Pay
		},
		data() {
			return {
				// 支付方式 微信/支付宝
				paymentType: 'wxpay',
				// 下订单参数
				orderParams: {
					service_type: 'stick',
					service_id: 0,
					deduct_points: 0,
					payment: 'wxpay',
					tag_text: ''
				},
				// 服务列表
				stickList: [],
				// 当前选择服务下标
				activeIndex: 0,
				// 积分点数
				myPoints: 0,
				// 是否允许积分抵扣
				enable_points_deduct: 0,
				// 允许抵扣的积分数
				enable_points_deduct_points: 0,
				// 允许抵扣的金额
				enable_points_deduct_expense: 0,
				// 抵扣后金额
				after_deduct_expense: 0,
				// 没有折扣的金额
				old_amount: 0,
				// 最终支付的金额
				amount: 0,
				// 是否使用积分抵扣
				is_deduct: false,
				points_byname: 0
			};
		},
		onShow() {
			this.getServiceList()
		},
		watch: {
			amount: function(newVal) {
				if (newVal == 0) {
					this.orderParams.payment = 'free'
				} else {
					this.orderParams.payment = 'wxpay'
				}
			}
		},
		mounted() {
			this.points_byname = this.$store.state.config.points_byname
		},
		methods: {
			// 获取服务列表
			getServiceList() {
				http.get(api.personal_servicelist, {
					type: 'stick'
				}).then(res => {
					if (res.data.code == 200) {
						let list = res.data.data.items
						// 计算 单天/单次 金额
						for (let iterator of list) {
							let expense_arr = iterator.expense.split('.')
							iterator.expense1 = expense_arr[0]
							iterator.expense2 = expense_arr[1]
							iterator.expense_avg = iterator.expense / iterator.days
							iterator.expense_avg = iterator.expense_avg.toFixed(2) + '元/天'
							this.stickList.push(iterator)
						}
						// 默认选择第一项服务  
						// 服务id
						this.orderParams.service_id = list[0].id
						// 我的积分
						this.myPoints = res.data.data.member_points
						// 是否允许积分抵扣
						this.enable_points_deduct = list[0].enable_points_deduct
						// 允许抵扣的积分数
						this.enable_points_deduct_points = list[0].enable_points_deduct_points
						// 允许抵扣的金额
						this.enable_points_deduct_expense = list[0].enable_points_deduct_expense
						// 抵扣后金额
						this.after_deduct_expense = list[0].after_deduct_expense
						// 没有折扣的金额
						this.old_amount = list[0].expense
						console.log(list[0], 'list[0]', list[0].enable_points_deduct_points, this
							.enable_points_deduct_points)
						// 计算最终支付金额
						this.handlerFinalAmount()
					}
				})
			},
			// 计算金额
			handlerFinalAmount() {
				if (this.is_deduct) {
					this.amount = this.after_deduct_expense
				} else {
					this.amount = this.old_amount
				}
			},
			// 是否使用积分抵扣
			handleIsIntegralChange(e) {
				this.is_deduct = !this.is_deduct
				this.orderParams.deduct_points = this.is_deduct ? this.enable_points_deduct_points : 0
				this.handlerFinalAmount()
			},
			// 服务项点击
			handleServiceItemClick(item, index) {
				// 切换时重置抵扣
				this.is_deduct = false
				this.orderParams.deduct_points = 0
				this.activeIndex = index
				// 服务id
				this.orderParams.service_id = item.id
				// 是否允许积分抵扣
				this.enable_points_deduct = item.enable_points_deduct
				// 允许抵扣的积分数
				this.enable_points_deduct_points = item.enable_points_deduct_points
				// 允许抵扣的金额
				this.enable_points_deduct_expense = item.enable_points_deduct_expense
				// 抵扣后金额
				this.after_deduct_expense = item.after_deduct_expense
				// 没有折扣的金额
				this.old_amount = item.expense
				// 计算最终支付金额
				this.handlerFinalAmount()
			},
			// 切换支付方式
			handleChangePaymentType(e) {
				this.paymentType = e.detail.value
				this.orderParams.payment = e.detail.value
			},
			// 支付成功
			handlePaySuccess() {
				uni.navigateTo({
					url: '/pages/service/orderList'
				})
			},
			// 支付失败
			handlePayFail() {
				uni.navigateTo({
					url: '/pages/service/orderList'
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		width: 100%;
		height: 100%;

		// background: url('@/service/static/img/resumeTopBg.png') no-repeat top center / 100% auto;
		.banner_img {
			display: block;
			width: 100%;
		}

		.info {
			height: calc(100% - 240rpx - 320rpx);
			// margin-top: 320rpx;
			overflow-y: auto;
			position: relative;

			.serviceBox {
				.resumeServiceTitle {
					color: #333;
					font-size: 30rpx;
					font-weight: bold;
					padding: 27rpx 36rpx 34rpx;
				}


				.serviceList {
					overflow-x: auto;
					white-space: nowrap;
					margin: 0 0 64rpx 36rpx;

					.serviceItem {
						display: inline-block;
						width: 230rpx;
						height: 286rpx;
						margin-right: 30rpx;
						border: 1rpx solid #D1A571;
						text-align: center;
						position: relative;
						padding: 62rpx 0 0 0;
						box-sizing: border-box;
						border-radius: 5rpx;

						.recomIcon {
							width: 59rpx;
							height: 59rpx;
							background: url('@/service/static/img/recommend.png') no-repeat center center / 100% 100%;
							position: absolute;
							left: 0;
							top: 0;
						}

						.t1 {
							color: #333333;
							font-size: 30rpx;
						}

						.t2 {
							margin-top: 36rpx;
							color: #C73E32;
							font-size: 28rpx;
						}

						.t3 {
							margin-top: 32rpx;
							padding: 20rpx 0;
							color: #999999;
							font-size: 26rpx;
						}

						.icon {
							position: absolute;
							right: 0rpx;
							bottom: 0rpx;
							width: 40rpx;
							height: 40rpx;
							display: none;
							background: url('@/service/static/img/serviceAc.png') no-repeat center center / 40rpx 40rpx;
						}

						&.ac {
							border: 1rpx solid #FD6260;
							background: #FEF5F5;

							.t3 {
								color: #fff;
								background: #FD6260;
							}

							.icon {
								display: block;
							}
						}
					}
				}
			}

			.payBox {
				margin: 0 36rpx 30rpx;
				padding: 0 36rpx;
				box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(67, 12, 159, 0.13);

				::v-deep.uni-checkbox-input-checked {
					background: #007aff;
					transform: scale(0.8);
				}

				.payLine {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 36rpx 0;

					&.border {
						border-bottom: 1rpx solid #ededed;
					}

					.label {
						color: #333;
						font-size: 28rpx;

						&.wxIcon {
							padding-left: 40rpx;
							background: url('@/service/static/img/wxPayIcon.png') no-repeat left center /31rpx 27rpx;
						}

						&.aliIcon {
							padding-left: 40rpx;
							background: url('@/service/static/img/aliPayIcon.png') no-repeat left center /26rpx 26rpx;
						}
					}

					.text {
						color: #333;
						font-size: 28rpx;
						display: flex;
						align-items: center;

						.color {
							color: #999;
						}
					}
				}
			}

			.btns {
				position: fixed;
				bottom: 0;
				right: 0;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 36rpx;
				border-top: 1rpx solid #ededed;
				background: #fff;

				.price {
					font-size: 28rpx;
					color: #333;

					.color {
						color: #FF4030;
					}
				}

				.btn {
					color: #FFFFFF;
					font-size: 28rpx;
					background: #FD6260;
					border-radius: 10rpx;
					padding: 10rpx 30rpx;
				}
			}
		}
	}
</style>